<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				border: 1px black solid ;
			}
		</style>
	</head>
	<body>
		<div id="d1" style="width: 200px ; height: 200px;">
			<div id="d2" style="width: 150px ; height: 150px;">
				<div id="d3" style="width: 100px ; height: 100px;"></div>
			</div>
		</div>
		<script type="text/javascript">
			var divs = document.querySelectorAll("div");
			for (let i = 0; i < divs.length; i++) {
				divs[i].addEventListener("click", fun1, true);
			}
			for (let i = 0; i < divs.length; i++) {
				divs[i].addEventListener("click", fun2, false);
			}
			function fun1(){
				console.log(`捕获型：${event.currentTarget.id}`);
				
			}
			function fun2(){
				console.log(`冒泡型：${event.currentTarget.id}`);
				event.stopPropagation();
			}
		</script>
	</body>
</html>
